<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>数据验证</title>

</head>
<body>
<!--
1. 用户名不能少于6位：span1
2. 手机号必须是1开头的11位数字：span2
3. 点击“注册”时，如果不满足1和2，取消注册：span3
4. 注册成功之后将名字写入数组（用户数组）
5. 用户名不能重复注册：span1
-->
<script type="text/javascript">
    var users = []; /* 用来保持所有已经注册的用户名 */
    function reg() {
        if (checkName() && checkTel()) {
            spans[2].innerHTML = "注册成功！";
            var name = document.getElementById("username").value;
            users.push(name);
            return false;   /* 应该返回true，为了模拟数据，防止刷新，暂时返回false */
        } else {
            spans[2].innerHTML = "注册失败！请检查输入！";
            return false;
        }
    }
</script>
<form action="#" method="get" onsubmit="return reg()">
    <label>
        姓名：<input type="text" id="username"><span></span>  <!-- span用来显示提示信息-->
        <br>
        手机号码：<input type="text" id="phone_number"><span></span>
        <br>
        <input type="submit" value="注册"><span></span>
    </label>
</form>
<script type="text/javascript">
    var spans = document.getElementsByTagName("span");

    function checkName() {
        var name = document.getElementById("username").value;
        if (name.length < 6) {
            spans[0].innerHTML = "用户名不能少于6位";
            return false;
        } else {
            if (users.indexOf(name) > -1) {
                spans[0].innerHTML = "用户名已经被注册！";
                return false;
            } else {
                spans[0].innerHTML = "用户名可用！";
                return true;
            }
        }
    }

    function checkTel() {
        var phone_number = document.getElementById("phone_number").value;
        if (!/^1\d{10}$/.test(phone_number)) {
            spans[1].innerHTML = "手机号码格式有误";
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>